<template>
  <div class="__booking-goods-item">
    <img
      bindtap='enlarge'
      class='shop-recommend-pic'
      :src='data.Image'
    />
    <div class='shop-recommend-name'>{{data.Name}}</div>
    <div class='cart-price'>
      ¥
      <div class='cart-price-now'>{{data.Price}}</div>
      <div class='cart-price-origin'>{{data.OrginalPrice}}</div>
    </div>
    <div class="cart-count-box">
      <Stepper
        v-model="data.Num"
        :min="0"
        :max="limitCount"
        @plus="onPlus"
        @minus="onMinus"
        @overlimit="overlimit"
      />
    </div>
  </div>
</template>
<script>
import { Stepper, Toast } from 'vant';
export default {
  components: {
    Stepper,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isLimit: false,
      limitCount: 0
    }
  },
  methods: {
    overlimit() {
      if (this.isLimit) {
        Toast(`该商品限购${this.limitCount}件`)
      } else {
        Toast('库存不足')
      }
    },
    onPlus() {
      console.log(this.data);
      if (this.data.IsMulti) {
        setTimeout(() => {
          this.data.Num -= 1;
        }, 0);
        this.$emit('select', {
          data: this.data,
          type: 'booking'
        });
      } else {
        this.$emit('change', {
          value: this.data.Num + 1,
          changeValue: 1,
          id: this.data.Id,
          type: 'booking',
          data: this.data
        });
      }
    },
    onMinus() {
      if (this.data.IsMulti) {
        setTimeout(() => {
          this.data.Num += 1;
        }, 0);
        Toast('多规格商品只能去购物车删除哦');
        return;
      }
      this.$emit('change', {
        value: this.data.Num - 1,
        changeValue: -1,
        id: this.data.Id,
        type: 'booking',
        data: this.data
      });
    },
  },
  created() {
    const { data } = this;
    const isLimit = data.RemainingCount > data.LimitCount;
    const limitCount = isLimit ? data.LimitCount : data.RemainingCount;
    this.limitCount = limitCount;
    this.isLimit = isLimit;
  }
}
</script>
<style lang="less" scoped>
.__booking-goods-item{
  width: 220px;
  height: 380px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
  .shop-recommend-pic{
    width: 220px;
    height: 220px;
  }
  .shop-recommend-name{
    width:100%;
    font-size:28px;
    line-height:32px;
    height:64px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .cart-price{
    font-size: 22px;
    color: #e51c24;
    display: flex;
    align-items: baseline;
    .cart-price-now{
      font-size: 32px;
      margin-right: 10px;
    }
    .cart-price-origin{
      color: #999;
      text-decoration: line-through;
    }
  }
  .cart-count-box{
    text-align: right;
  }
}
</style>
